<template>
  <el-dialog :visible.sync="visible" :title="$t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
    <!-- <el-form v-loading="loading" :model="dataForm" :rules="dataRule" ref="dataForm"
      @keyup.enter.native="dataFormSubmitHandle()" :label-width="'80px'">
      <el-form-item prop="fileList">
        <uni-upload-pro :disabled="false" ref="upload" :uploadOriProps="uploadOriProps" v-model="dataForm.fileList">
        </uni-upload-pro>
      </el-form-item>
    </el-form> -->
    <!-- <template slot="footer">
      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
      <el-button type="primary" :loading="loading" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
    </template> -->
    <el-upload name="file" :action="url" :file-list="dataForm.fileList" drag :before-upload="beforeUploadHandle"
      :on-success="_handleSuccess" :data="data" class="text-center">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text" v-html="$t('upload.text')"></div>
      <div class="el-upload__tip" slot="tip">图片尺寸：120*120</div>
      <div class="el-upload__tip" slot="tip"> {{ $t('upload.tip', { 'format': 'bmp、png、gif、jpg、jpeg' }) }}
      </div>
    </el-upload>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      loading: false,
      url: '',
      dataForm: {
        fileList: [],
        headUrl: ''
      },
      data: {
        dirValue: 'PHOTO',
        fileClass: 'image'
      }
      // uploadOriProps: {
      //   drag: true,
      //   multiple: true,
      //   'list-type': 'picture-card',
      //   'on-remove': this._handleRemove,
      //   'on-success': this._handleSuccess,
      //   'before-upload': this.beforeUploadHandle,
      //   data: {
      //     dirValue: 'PHOTO',
      //     fileClass: 'image'
      //   },
      //   limit: 1
      // }
    }
  },
  computed: {
    dataRule () {
      return {
        remark: [
          { max: 200, message: '长度不能超过 200 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        this.dataForm.fileList = []
        // this.$refs['dataForm'].resetFields()
        this.url = `${window.SITE_CONFIG['apiURL']}/sys/oss/upload?token=${this.$cookies.get('token')}`

        // if (this.dataForm.id) {
        //   this.getInfo()
        // } else {
        //   this.getDictDataSort()
        // }
      })
    },
    // 上传之前
    beforeUploadHandle (file) {
      if (!/.+\.bmp$/.test(file.name) && !/.+\.png$/.test(file.name) && !/.+\.gif$/.test(file.name) && !/.+\.jpg$/.test(file.name) && !/.+\.jpeg$/.test(file.name)) {
        this.$message.error(this.$t('upload.tip', { 'format': 'bmp、png、gif、jpg、jpeg' }))
        return false
      }
    },
    _handleRemove (file, fileList) {
      console.log('_handleRemove')
    },
    _handleSuccess (file, fileList) {
      console.log('_handleSuccess', file)
      if (file.code !== 0) {
        return
      }
      this.dataForm.headUrl = file.data.url
      this.$http.put('/user/center/photo', this.dataForm).then(({ data: res }) => {
        if (res.code !== 0) {
          return
        }
        this.$store.state.user.headUrl = this.dataForm.headUrl
        this.visible = false
        this.$emit('refreshData')
      }).catch(() => { })
    }
    // 根据pid 获取最大sort
    // getDictDataSort () {
    //   this.$http.get(`/sys/sysdictdata/getDictDataMaxSort/${this.dataForm.pid}`).then(({ data: res }) => {
    //     if (res.code !== 0) {
    //       return
    //     }
    //     this.dataForm.sort = res.data.sort
    //   }).catch(() => {
    //   })
    // },
    // 获取信息
    // getInfo () {
    //   this.loading = true
    //   this.$http.get(`/sys/sysdictdata/${this.dataForm.id}`).then(({ data: res }) => {
    //     this.loading = false
    //     if (res.code !== 0) {
    //       return
    //     }
    //     this.dataForm = {
    //       ...this.dataForm,
    //       ...res.data
    //     }
    //   }).catch(() => {
    //   })
    // },
  }
}
</script>
